<template>
  <div>
    <el-form label-width="80px" size="small" @submit.native.prevent>
      <el-form-item label="任务表单">
        <el-select v-model="bpmnFormData.formKey" clearable class="m-2" placeholder="配置任务表单" @change="updateElementFormKey" @clear="removeFormItem">
          <el-option
              v-for="item in formList"
              :key="item.formId"
              :label="item.formName"
              :value="item.formId">
            <span style="float: left">{{ item.formName }}</span>
            <span style="float: right">
                <dict-tag :options="dict.type.form_type" :value="item.formType"/>
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-view" size="mini" @click="handleFormPermission">表单授权</el-button>
      </el-form-item>
    </el-form>

    <!-- 表单信息 -->
    <el-dialog title="表单信息" :visible.sync="formOpen" width="65%" :destroy-on-close="true" append-to-body>
      <div class="top-right-btn" >
        <el-row :gutter="10" class="mb8 mr10">
          <div>
            <span class="custom-badge-text">授权状态：</span>
            <span class="custom-badge success"></span><span class="custom-badge-text">可读写</span>
            <span class="custom-badge info"></span><span class="custom-badge-text">只读</span>
            <span class="custom-badge danger"></span><span class="custom-badge-text">不可见</span>
            <span class="custom-badge-stars"></span><span class="custom-badge-text">必填</span>
          </div>
        </el-row>
      </div>
      <el-table ref="dataTable" v-loading="loading" :row-key="getRowKey" :data="formWidgetList" max-height="600" border fit @selection-change="handleSelectionChange">
        <el-table-column type="selection" :reserve-selection="true" width="55" align="center" :selectable="selectable"/>
        <el-table-column label="表单" prop="formName" min-width="50px">
          <template slot-scope="scope">
            <span>{{scope.row.formName}}</span>
            <span v-if="scope.row.nodeId === 'init'" class="ml5">(初始表单)</span>
          </template>
        </el-table-column>
        <el-table-column label="授权" prop="widgetType" min-width="50px">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.widgetType" :disabled="firstUserTask && scope.row.nodeId === 'init'" @change="handleRadioChange(scope.row)">
              <el-radio label="readwrite">全读写</el-radio>
              <el-radio label="readonly">全只读</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="字段授权(点击切换)" prop="formWidgets" min-width="200px">
          <template slot-scope="scope">
            <div :class="{ 'tag-disabled': firstUserTask && scope.row.nodeId === 'init' }">
              <el-tag style="margin-right: 5px;" v-for="(widget,index) in scope.row.formWidgets"
                      :key="index"
                      size="small"
                      effect="plain"
                      class="clickable"
                      :type="getTagType(widget.type)"
                      @click="handleTagClick(scope.row.nodeId, widget)"
              >
                <!--invisible:不可见 readonly:只读 readwrite:可读写-->
                <el-tooltip class="item" effect="dark" :content="getTooltipContent(widget.type)" placement="top-start">
                  <i :class="getIconClass(widget.type)">{{ widget.label }}<span class="custom-tag-stars" v-show="widget.required"></span></i>
                </el-tooltip>
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" size="mini" @click="handleShowForm(scope.row)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formOpen = false">取 消</el-button>
        <el-button type="primary" @click="saveFormPermission">确 定</el-button>
      </div>
      </el-dialog>

      <el-dialog :visible.sync="viewOpen" width="60%" :destroy-on-close="true" append-to-body>
        <div slot="title">
          <span class="inner">{{viewForm.formName}}</span>
          <dict-tag class="inner" :options="dict.type.form_type" :value="viewForm.formType"/>
        </div>
        <div class="test-form">
          <v-form-render v-if="renderForm" :form-data="formData" ref="vFormRef"/>
          <component v-else :is="formCompName" ref="vFormRef"></component>
        </div>
      </el-dialog>
  </div>
</template>

<script>

import {StrUtil} from "@/utils/StrUtil";

export default {
  name: "FormPanel",
  dicts: ['form_type'],
  /** 组件传值  */
  props : {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      loading: true,
      formList: [], // 表单数据
      bpmnFormData: {
        formKey: "",
      },
      formData:{},
      firstUserTask: false, // 是否是第一个用户任务节点
      formOpen: false, // 是否渲染在线表单
      viewOpen: false, // 是否渲染在线表单
      renderForm: true, // 是否渲染在线表单
      viewForm: {}, // 是否渲染在线表单
      formCompName: '', // 路由表单组件名称
      formWidgetList: [], // 表单组件属性列表
      otherExtensionList: [], // 其它扩展属性列表
      bpmnElementFormItemList: [], // 扩展表单组件属性列表
      userTasksAfterElement: [], // 当前节点后面所有的用户任务节点
      multipleSelection: [] // 选择表单授权列表
    }
  },

  /** 传值监听 */
  watch: {
    id: {
      handler(newVal) {
        if (StrUtil.isNotBlank(newVal)) {
          this.resetFlowForm();
        }
      },
      immediate: true, // 立即生效
    },
  },
  created() {

  },
  methods: {
    // 方法区
     resetFlowForm() {
      this.formWidgetList = [];
      this.bpmnElement = this.modelerStore.element;
      // 等待表单加载列表完成
      this.formList = this.modelerStore.formList;
      this.bpmnFormData.formKey = this.modelerStore.element.businessObject.formKey;
      this.otherExtensionList = []; // 其他扩展配置
      const bpmnElementProperties = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
        if (ex.$type !== `flowable:FormItems`) {
          this.otherExtensionList.push(ex);
        }
        return ex.$type === `flowable:FormItems`;
      }) ?? [];
      // 保存当前节点所有的扩展表单权限信息
      this.bpmnElementFormItemList = this.getBpmnElementFormItemList(bpmnElementProperties);
      if (this.bpmnElementFormItemList.length > 0) {
        // 复制 显示
        this.copyAndDisplayFormWidgets();
      } else {
        // 初始化当前节点之前的所有用户任务节点
        this.initFormPermission();
        // 获取流程发起表单
        this.getInitForm();
      }
      // 递归查找当前节点之后的所有用户任务节点
      const currentElement = this.modelerStore.elRegistry.get(this.id);
      this.userTasksAfterElement = [];
      this.findUserTasksAfterElement(currentElement, this.userTasksAfterElement);
      this.checkFirstUserTask(currentElement);
    },

    // 检验是否是第一个任务节点
    checkFirstUserTask(currentElement){
      const { businessObject } = currentElement;
      const process = businessObject.$parent;
      const firstTask = process.flowElements.find((element) => {
        return element.$type === 'bpmn:UserTask';
      });

      this.firstUserTask = !!(firstTask && businessObject.$type === 'bpmn:UserTask' && businessObject.id === firstTask.id);
    },

    // 获取当前节点所有的扩展表单权限信息
    getBpmnElementFormItemList(bpmnElementProperties) {
      return bpmnElementProperties.reduce((pre, current) => {
        if (current.values && current.values.length > 0) {
          return pre.concat(current.values);
        } else {
          return pre;
        }
      }, []);
    },

    // 复制显示表单权限
    copyAndDisplayFormWidgets() {
       // 处理当前节点已有扩展表单信息
      const widgetList = JSON.parse(JSON.stringify(this.bpmnElementFormItemList ?? []));
      this.formWidgetList = widgetList.map(item => {
        return {...item, formWidgets: JSON.parse(item.formWidgets)};
      });

      // 处理当前节点之前的表单信息,加载到当前节点上(前面节点可能删除或更换表单,当前节点也需要重新更换)
      const beforeTaskFormList = this.getBeforeTaskFormList() || [];
      beforeTaskFormList.forEach(element => {
        // 寻找表单列表中是否存在与当前元素相关的信息
        const index = this.formWidgetList.findIndex(item => item.formId.toString() === element.formKey && item.nodeId === element.nodeId);
        if (index === -1) {
          // 如果不存在相关信息，则从整个表单列表中筛选出匹配的表单，并为每个匹配的表单设置节点ID
          const filteredForms = this.formList.filter(form => element.formKey === form.formId.toString());
          filteredForms.forEach(form => {
            form.nodeId = element.nodeId;
            this.processWidgets(form);
          });
        }
      });
    },

    // 更新表单key
    updateElementFormKey(formId) {
      if (StrUtil.isNotBlank(formId)) {
        // 删除当前节点原有的表单扩展信息
        const formKey = this.modelerStore.element.businessObject.formKey;
        const index = this.findFormWidgetIndex(formKey);
        if (index !== -1){
          this.formWidgetList.splice(index, 1);
        }
        this.modelerStore.modeling.updateProperties(this.modelerStore.element, {'formKey': formId});
        const form = this.formList.find(item => item.formId === formId);
        if (form) {
          // 删除已配置的表单信息,更换节点表单后不进行替换,需要手动再次确认授权绑定
          const elIndex = this.findElementFormItemIndex(formKey);
          if (elIndex !== -1) {
            this.bpmnElementFormItemList.splice(elIndex, 1);
            if (this.bpmnElementFormItemList.length === 0) {
              this.deleteCurrentElementFormExtensions(this.modelerStore.element);
            } else {
              // 加入xml扩展属性中
              const tempForm = {
                ...form,
                nodeId: this.id,
                formWidgets: JSON.parse(form.formWidgets)
              };
              this.updateFormFields(tempForm);
            }
            // 变更或删除当前节点绑定的表单后,同时删除后续其他节点的引用,需要重新授权添加
            this.deleteAfterElementFormExtensions(formKey);
          }
          form.nodeId = this.id;
          this.processWidgets(form);
        }
      }
    },

    // 获取表单组件列表
    findFormWidgetIndex(formKey) {
      return this.formWidgetList.findIndex(item => item.formId.toString() === formKey && item.nodeId === this.id);
    },

    // 获取表单组件列表
    findElementFormItemIndex(formKey) {
      return this.bpmnElementFormItemList.findIndex(item => item.formId.toString() === formKey && item.nodeId === this.id);
    },

    // 获取表单组件列表
    findSelectionIndex(formKey) {
      return this.multipleSelection.findIndex(item => item.formId.toString() === formKey && item.nodeId === this.id);
    },

    // 表单选择变化
    handleSelectionChange(selection) {
      this.multipleSelection = JSON.parse(JSON.stringify(selection));
    },

    // 初始化当前节点表单权限
    initFormPermission() {
      const elementList = this.getCurrentAndBeforeTaskFormList() || [];
      if (this.formWidgetList.length === 0) {
        elementList.forEach(element => {
          const filteredForms = this.formList.filter(form => element.formKey === form.formId.toString());
            filteredForms.forEach(form => {
              form.nodeId = element.nodeId;
              this.processWidgets(form);
            });
        })
      }
    },

    // 获取流程发起表单
    getInitForm() {
      // 如果在表单组件列表中找不到nodeId为'init'的组件
      if (this.formWidgetList.findIndex(item => item.nodeId === 'init') === -1) {
        // 获取当前表单的formId
        const formId = this.modelerStore.formId;
        // 在表单列表中找到对应formId的表单
        const form = this.formList.find(item => item.formId === formId);
        // 如果表单存在
        if (form) {
          // 将表单的nodeId设置为'init'
          form.nodeId = 'init';
          // 处理表单组件
          this.processWidgets(form);
          // 加入xml扩展属性中
          const tempForm = {
            ...form,
            formWidgets: JSON.parse(form.formWidgets)
          };
          this.updateFormFields(tempForm);
        }
      }
    },

    // 获取当前节点之前节点表单信息
    getBeforeTaskFormList() {
      // 获取当前节点信息
      const currentElement = this.modelerStore.elRegistry.get(this.id);
      const userTasksBeforeElement = [];
      this.findUserTasksBeforeElement(currentElement, userTasksBeforeElement);

      // // 提取用户任务节点的表单项信息?
      // this.bpmnElementFormItemList = this.extractFormItems(userTasksBeforeElement);

      // 提取用户任务节点的表单项信息
      return userTasksBeforeElement
        .filter(item => item.businessObject.formKey !== undefined)
        .map(item => {
          return {
            nodeId: item.id,
            formKey: item.businessObject.formKey
          };
        });
    },

    // 获取当前节点和当前节点之前的表单信息
    getCurrentAndBeforeTaskFormList() {
      // 获取当前节点信息
      const currentElement = this.modelerStore.elRegistry.get(this.id);
      const userTasksBeforeElement = [];
      this.findUserTasksBeforeElement(currentElement, userTasksBeforeElement);
      userTasksBeforeElement.push(currentElement);

      // 提取用户任务节点的表单项信息
      this.bpmnElementFormItemList = this.extractFormItems(userTasksBeforeElement);

      // 获取当前节点之前节点表单信息
      return userTasksBeforeElement
        .filter(item => item.businessObject.formKey !== undefined)
        .map(item => {
          return {
            nodeId: item.id,
            formKey: item.businessObject.formKey
          };
        });
    },

    // 提取用户任务节点的表单项信息
    extractFormItems(userTasks) {
      const bpmnElementProperties = userTasks.flatMap(element => {
        const formItems = element.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `flowable:FormItems`);
        if (formItems) {
          return formItems.flatMap(item => {
            if (item.nodeId !== 'init') {
              return item.values || [];
            }
            return [];
          });
        }
        return [];
      });

      return bpmnElementProperties.flatMap(item => item.values || []); // 返回扁平化处理后的表单项信息
    },

    // 递归查找当前节点之前的所有用户任务节点
    findUserTasksBeforeElement(currentNode, userTasks, visitedNodes = new Set()) {
      const incomingSequenceFlows = currentNode.incoming;
      incomingSequenceFlows.forEach(sequenceFlow => {
        const sourceElement = sequenceFlow.source;
        if (!visitedNodes.has(sourceElement)) {
          visitedNodes.add(sourceElement);
          if (sourceElement.type === 'bpmn:UserTask' && !userTasks.includes(sourceElement)) {
            userTasks.push(sourceElement);
          }
          this.findUserTasksBeforeElement(sourceElement, userTasks, visitedNodes);
        }
      });
    },

    // 递归查找当前节点之后的所有用户任务节点
    findUserTasksAfterElement(currentNode, userTasks, visitedNodes = new Set()) {
      const outgoingSequenceFlows = currentNode.outgoing;
      outgoingSequenceFlows.forEach(targetFlow => {
        const targetElement = targetFlow.target;
        if (!visitedNodes.has(targetElement)) {
          visitedNodes.add(targetElement);
          if (targetElement.type === 'bpmn:UserTask' && !userTasks.includes(targetElement)) {
            userTasks.push(targetElement);
          }
          this.findUserTasksAfterElement(targetElement, userTasks, visitedNodes);
        }
      });
    },

    // 查看表单权限
    handleFormPermission() {
      this.loading = true;
      if (this.formWidgetList.length === 0) {
        const form = this.formList.find(item => item.formId === this.bpmnFormData.formKey);
        if (form) {
          form.nodeId = this.id;
          this.processWidgets(form);
        }
      }
      this.formOpen = true;
      this.$nextTick(() => {
        if (this.$refs.dataTable) {
          // 将表单组件列表中的组件按照nodeId升序排序
          this.formWidgetList.sort((a, b) => {
            if (a.nodeId === 'init' && b.nodeId !== 'init') {
              return -1;
            } else if (a.nodeId !== 'init' && b.nodeId === 'init') {
              return 1;
            } else {
              return 0;
            }
          });
          this.$refs.dataTable.clearSelection();
          this.formWidgetList.forEach(item => {
            this.$refs.dataTable.toggleRowSelection(item, true);
          });
        }
      });

      this.loading = false;
    },

    // 初始化表单字段权限
    initElementExtensions() {
      this.formWidgetList.forEach(item => {
        this.initFormFields(item);
      });
    },

    // 保存表单字段权限
    saveFormPermission() {
      if (this.multipleSelection.length === 0) {
        this.$confirm("未勾选表单信息时,表单权限不会记录到节点!", "提示", {
          confirmButtonText: "确 认",
          cancelButtonText: "取 消",
          type: 'warning',
          center: true
        }).then(() => {
          this.deleteCurrentElementFormExtensions(this.modelerStore.element);
          this.formOpen = false;
        }).catch(() => console.info("操作取消"));
      } else {
        // 去除formItems中未勾选的表单信息,只保留已勾选的信息
        this.bpmnElementFormItemList = this.bpmnElementFormItemList.filter(item => this.multipleSelection.some(selectionItem => selectionItem.formId.toString() === item.formId.toString()));

        // 循环写入formItems节点,并且替换掉已选中表单中的formWidgets为授权后的表单部件
        this.multipleSelection.forEach(selectionItem => {
          const matchingItem = this.formWidgetList.find(widgetItem => widgetItem.formId.toString() === selectionItem.formId.toString());
          if (matchingItem) {
            selectionItem.formWidgets = [...matchingItem.formWidgets];
          }
          this.updateFormFields(selectionItem);
        });
        this.formOpen = false;
      }
    },

    // 初始化表单字段权限
    initFormFields(item) {
      const { formId, formName, formType, formWidgets } = item;
      // 新建属性字段
      const newPropertyObject = this.modelerStore.moddle.create(`flowable:FormItem`, { formId, formName, formType, formWidgets: JSON.stringify(formWidgets) });
      // 新建一个属性字段的保存列表
      const propertiesObject = this.modelerStore.moddle.create(`flowable:FormItems`, {
        values: [newPropertyObject]
      });
      this.updateElementExtensions(propertiesObject);
    },

    // 更新表单字段权限
    updateFormFields(item) {
      const { formId, nodeId, formName, formType, formWidgets } = item;
      // 创建新的属性字段对象
      const newPropertyObject = this.modelerStore.moddle.create(`flowable:FormItem`, { formId, nodeId, formName, formType, formWidgets: JSON.stringify(formWidgets) });
      // 筛选出 bpmnElementFormItemList 中 formId 不等于 newPropertyObject.formId 的元素
      this.bpmnElementFormItemList = this.bpmnElementFormItemList.filter(item => item.formId !== newPropertyObject.formId)
      // 将新的属性字段对象添加到 bpmnElementFormItemList 中
      this.bpmnElementFormItemList.push(newPropertyObject);
      // 创建包含所有属性字段的对象
      const propertiesObject = this.modelerStore.moddle.create(`flowable:FormItems`, {
        values: this.bpmnElementFormItemList
      });
      // 更新元素的扩展属性
      this.updateElementExtensions(propertiesObject);

      // TODO 打开注释后会同步更新后续用户任务扩展属性
      // this.updateAfterElementFormExtensions(this.userTasksAfterElement, formId, newPropertyObject);
    },


    // 移除表单字段权限
    removeFormItem() {
      const formKey = this.modelerStore.element.businessObject.formKey;  // 存储formKey属性的值
      this.$confirm("确认移除表单吗？", "提示", {
        confirmButtonText: "确 认",
        cancelButtonText: "取 消",
        type: 'warning',
        center: true
      }).then(() => {
        this.deleteFormKey(); // 移除formKey属性
        this.deleteFormWidget(formKey); // 从列表中移除表单部件
        this.deleteMultipleSelection(formKey); // 从选择列表中移除相关项
        this.deleteBpmnElementFormInfo(formKey);  // 删除已配置的表单信息
      }).catch(() => {
        this.bpmnFormData.formKey = formKey;  // 恢复原始的formKey值
      });
    },

    // 删除formKey属性
    deleteFormKey() {
      delete this.modelerStore.element.businessObject['formKey'];
    },

    // 删除表单部件
    deleteFormWidget(formKey) {
      const widgetIndex = this.findFormWidgetIndex(formKey);
      if (widgetIndex !== -1) {
        this.formWidgetList.splice(widgetIndex, 1);
      }
    },

    // 删除多选项配置
    deleteMultipleSelection(formKey) {
      const selectIndex = this.findSelectionIndex(formKey);
      if (selectIndex !== -1) {
        this.multipleSelection.splice(selectIndex, 1);
      }
    },

    // 删除配置的表单信息
    deleteBpmnElementFormInfo(formKey) {
      const index = this.findElementFormItemIndex(formKey);
      if (index !== -1) {
        this.bpmnElementFormItemList.splice(index, 1);
        if (this.bpmnElementFormItemList.length === 0) {
          this.deleteCurrentElementFormExtensions(this.modelerStore.element);
        } else {
          const propertiesObject = this.modelerStore.moddle.create('flowable:FormItems', {values: this.bpmnElementFormItemList});
          this.updateElementExtensions(propertiesObject);
        }
        // 变更或删除当前节点绑定的表单后,同时删除后续其他节点的引用,需要收到重新添加
        this.deleteAfterElementFormExtensions(formKey);
      }
    },

    // 删除当前任务节点下的表单扩展属性
    deleteCurrentElementFormExtensions(element) {
      if (element.businessObject?.extensionElements?.values) {
        element.businessObject.extensionElements.values.forEach((ex, index) => {
          if (ex.$type === 'flowable:FormItems') {
            element.businessObject.extensionElements.values.splice(index, 1);
          }
        });
      }
    },

    // 删除其他任务节点中引用的扩展表单
    deleteAfterElementFormExtensions(formKey) {
      const that = this;
      that.userTasksAfterElement.forEach(afterElement => {
        const { businessObject } = afterElement;
        if (businessObject?.extensionElements?.values) {
          businessObject.extensionElements.values.forEach((ex, index) => {
            if (ex.$type === 'flowable:FormItems') {
              ex.values.forEach((item, itemIndex) => {
                if (item.formId.toString() === formKey && item.nodeId === that.id) {
                  businessObject.extensionElements.values[index].values.splice(itemIndex, 1);
                }
              });
            }
          });
        }
      });
    },

    // 更新其他任务节点中引用的扩展表单
    updateAfterElementFormExtensions(elements, formKey, properties) {
      elements.forEach(afterElement => {
        if (afterElement.businessObject?.extensionElements?.values) {
          afterElement.businessObject.extensionElements.values.forEach((ex, index) => {
            if (ex.$type === 'flowable:FormItems') {
              ex.values.forEach((item, itemIndex) => {
                if (item.formId.toString() === formKey.toString()) {
                  afterElement.businessObject.extensionElements.values[index].values[itemIndex] = properties;
                }
              });
            }
          });
        }
      });
    },

    // 更新xml扩展属性
    updateElementExtensions(properties) {
      const extensions = this.modelerStore.moddle.create("bpmn:ExtensionElements", {
        values: this.otherExtensionList.concat([properties])
      });
      this.modelerStore.modeling.updateProperties(this.bpmnElement, {
        extensionElements: extensions
      });
    },

    // 查看表单
    handleShowForm(form) {
      const findForm = this.formList.find(item => item.formId === form.formId.toString());
      if (findForm) {
        this.viewForm = findForm;
        this.viewOpen = true;
        if (findForm.formType === 'route') {
          this.renderForm = false;
          this.formCompName = findForm.formContent;
          this.showFormWidgets(form);
        } else {
          this.renderForm = true;
          this.$nextTick(() => {
            this.$refs.vFormRef.setFormJson(findForm.formContent);
            // this.$refs.vFormRef.disableForm();  // 如果需要禁用整个表单，可以在这里调用
            this.showFormWidgets(form);
          });
        }
      }
    },

    // 显示表单组件
    showFormWidgets(form) {
      this.$nextTick(() => {
        const widgets = form.formWidgets || [];
        const widgetMap = {
          readonly: [],
          readwrite: [],
          invisible: []
        };
        widgets.forEach(widget => {
          widgetMap[widget.type].push(widget.id);
        });
        this.$refs.vFormRef.disableWidgets(widgetMap.readonly);
        this.$refs.vFormRef.enableWidgets(widgetMap.readwrite);
        this.$refs.vFormRef.hideWidgets(widgetMap.invisible);
      });
    },

    // 处理表单组件
    processWidgets(form){
      const formWidgets = JSON.parse(form.formWidgets);
      // 记录原组件读取状态,便于切换
      formWidgets.forEach(widget => {
        widget.oldType = widget.type;
      });
      this.formWidgetList.push({
        formId: form.formId,
        nodeId: form.nodeId,
        formName: form.formName,
        formType: form.formType,
        formWidgets: formWidgets
      });
    },

    // 获取标签提示信息
    getTooltipContent(type) {
      switch (type) {
        case 'invisible':
          return '不可见';
        case 'readonly':
          return '只读';
        case 'readwrite':
          return '可读写';
        default:
          return '';
      }
    },

    // 获取标签图标
    getIconClass(type) {
      switch (type) {
        case 'invisible':
          return 'el-icon-hide';
        case 'readonly':
          return 'el-icon-view';
        case 'readwrite':
          return 'el-icon-edit';
        default:
          return '';
      }
    },

    // 获取标签类型
    getTagType(type) {
      switch (type) {
        case 'invisible':
          return 'danger';
        case 'readonly':
          return 'info';
        case 'readwrite':
          return 'success';
        default:
          return 'primary';
      }
    },

    // 标签点击事件 type: invisible:不可见 readonly:只读 readwrite:可读写
    handleTagClick(nodeId, widget) {
      if (this.firstUserTask && nodeId === 'init') {
        this.$modal.msgWarning('用户发起流程节点不允许更改初始表单权限！');
        return;
      }
      const { type, oldType, required } = widget;
      if (type === 'readwrite') {
        // 如果是当前节点的表单 设置组件为只读时,校验是否是必填字段,如果是,则不允许设置为只读
        if (nodeId === this.id && required && oldType !== 'readonly') {
          this.$modal.msgWarning('该字段为必填字段，当前节点只能设置为读写权限！');
          return;
        }
        widget.type = 'readonly';
      } else if (type === 'readonly') {
        // 如果是当前节点的表单
        if (nodeId === this.id) {
          // 只有在原来是只读时才允许设置为可读写
          widget.type = oldType === 'readonly' ? 'readwrite' : 'invisible';
        } else {
          widget.type = 'invisible';
        }
      } else {
        widget.type = type === 'invisible' ? 'readwrite' : 'invisible';
      }
    },

    // 单选按钮批量授权
    handleRadioChange(data) {
      const { nodeId, widgetType, formWidgets } = data;
      // 批量设置组件为只读时,校验是否是当前节点的表单信息和必填字段,如果是,则不允许设置为只读
      formWidgets.forEach(widget => {
          if (widgetType !== "readonly" || nodeId !== this.id || !widget.required || widget.oldType === "readonly") {
            widget.type = widgetType;
          }
      });
    },

    // 禁用多选按钮
    selectable(row, index) {
      if (this.firstUserTask) {
        return row.nodeId !== 'init';
      } else {
        return true;
      }
    },

    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKey(row) {
      return row.index
    },
  }
}
</script>

<style lang="scss">

.clickable:hover {
  cursor: pointer;
}

.custom-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.custom-badge-stars {
  position: relative;
}

.custom-badge-stars::before {
  content: "*";
  color: #ff4d4f;
  font-size: 18px;
  position: absolute;
  top: 80%;
  transform: translate(-50%, -50%);
}

.custom-tag-stars {
  position: relative;
  margin-left: 5px;
}

.custom-tag-stars::before {
  content: "*";
  color: #ff4d4f;
  font-size: 12px;
  position: absolute;
  top: 40%;
  transform: translate(-50%, -50%);
}

.custom-badge-text {
  font-size: 12px;
  line-height: 1.5715;
  margin-left: 4px;
  margin-right: 6px;
}

.custom-badge.info {
  background-color: #818080;
}

.custom-badge.success {
  background-color: #52c41a;
}

.custom-badge.warning {
  background-color: #faad14;
}

.custom-badge.danger {
  background-color: #ff4d4f;
}

.inner {
  display: inline-block;
  margin: 5px; /* 可选，设置标签之间的间距 */
}

.tag-disabled {
  pointer-events: none; /* 禁用鼠标事件 */
  opacity: 0.6; /* 改变透明度以表示禁用状态 */
  cursor: not-allowed;
}

</style>
